<template>
  <div>
    <el-container>
      <!-- 侧边栏 -->
    
      <el-aside style="width:200px;min-height:100vh">
        
        <div style="height: 60px; line-height: 60px; background-color : #8c939d; color: white; display:flex;align-items:center;justify-content:center">
          欢迎使用高校实验室管理系统
        </div>

        <el-menu style="border:none" router background-color="#001529" text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" :default-active="$router.path">
          <el-menu-item index="home">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span>系统主页</span>
            </template>
            
          </el-menu-item>
        
          <el-submenu index="">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>实验信息管理</span>
            </template>
            <el-menu-item index="planMsg">实验计划管理</el-menu-item>
            <el-menu-item index="homework">学生实验管理</el-menu-item>

          </el-submenu>

        </el-menu>
       
      </el-aside>

      <el-container>

        <!-- 头部区域 -->
        <el-header>
          <i class="el-icon-menu" style="font-size:20px"></i>
          
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left:40px">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: $route.path }">{{$route.meta.name}}</el-breadcrumb-item>
          </el-breadcrumb>

          <div style="flex: 1; width:0; display:flex; align-items:center; justify-content:flex-end">
              <el-dropdown placement="bottom"> 
                <div style="display:flex; align-items:center; cursor:default">
                    <img src="@/assets/img/Admin.png" alt="管理员" style="width:40px ;height:40px; margin:0 5px">
                    <span>教师{{user.name}},欢迎你！</span>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="$router.push('updatePwd')">
                      修改密码
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="logout()">
                      退出系统
                    </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
          </div>

        </el-header>

        <!-- 主体区域 -->
        <el-main>
          
          <router-view/>

        </el-main>

      </el-container>

    </el-container>
  </div>
</template>

<script>

export default {
  name: 'TeacherMain',
 data () {
    return {
      user:JSON.parse(localStorage.getItem("honey-user") || '{}')
    }
    
  },
  created () {
    
  },
  methods: {
    logout(){
      localStorage.removeItem('honey-user'); // 清除用户数据
      this.$router.push('/teacherLogin');
    }
  }
}
</script>

<style scoped>
.el-menu--inline .el-meun-item {
  background-color: #000c17 !important;
}
.el-menu-item:hover,
.el-submenu__title:hover {
  color: #fff !important;
}
.el-submenu__title:hover i {
  color: #fff;
}
.el-menu-item.el-meun-item:is-active {
  background-color: #1890ff;
  border-radius: 5px;
  margin: 4px;
}
.el-menu-item {
  height: 40px;
  line-height: 40px;
  margin: 4px;
}
.el-submenu__title {
  height: 40px;
  line-height: 40px;
}
.el-header {
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
  display: flex;
  align-content: center;
}
</style>